<template>
    <div class="container-cc">
      <div class="search-wrap">
        <div class="icon-wrap">
          <van-icon name="search" />
        </div>
        <input ref="oInput" v-model.trim="inputValue" class="input-wrap" type="text" placeholder="请输入">
        <div class="search-btn" @click="handleSearch">搜索</div>
        <!-- <input ref="oInput" v-model.trim="inputValue" class="input-wrap" type="text" placeholder="请输入"> -->
      </div>
      <div v-for="(item, index) of messageList" :key="index" @click="toDetail(item.newsId)" class="box">
        <img class="mess-image" :src="item.newsImage" alt="">
        <div class="box-right">
          <div class="title ellipsis-multiline">{{ item.newsTitle }}</div>
          <div class="item-msg">
            <div class="author">{{ item.issue }}</div>
            <div class="time">{{ item.issueTime }}</div>
          </div>
        </div>
      </div>
      <div v-if="!loadingiconFlag" class="empty">没有更多了</div>
      <div class="loading-container">
        <van-loading color="#1989fa" type="spinner" v-if="loadingiconFlag">加载中...</van-loading>
      </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { reactive } from 'vue';
import {useRoute, useRouter} from 'vue-router';
import { onMounted } from 'vue'
import { getMessageList, SpdbNewsClick } from '@/api/message';
import { showToast } from 'vant';
const route = useRoute();
const curStatus = ref(route.query.status || '');
console.log(curStatus.value)
const loadingiconFlag = ref(false);
const router = useRouter()
const messageList = ref([])
import { usePageTitle, useDictSelect } from '@/store/base.js';

//  枚举 记录当前所有的选择
const pageMenu = {
  jzwk: {
    text: '家长微课',
    tag: '009',
  },
  jjzx: {
    text: '家教资讯',
  },
  hstj: {
    text: '好书推荐',
    tag: '007',
  },
  yexd: {
    text: '育儿心得',
    tag: '006',
  },
}

const { pageTitle, setPageTitle } = usePageTitle();


//  初始化数据
function initData() {
  const { text, tag } = pageMenu[curStatus.value];
  //  设置标题
  setPageTitle(text);

}

  const getList = () => {
  loadingiconFlag.value = true
    const params = {
      currentPage: 1,
      pageSize: 500,
      sidx: "issueTime",
      sort: "desc",
      issue: '',
      newsTitle: inputValue.value,
    }
    if (curStatus.value == 'jjzx') {
      params.newsLabel = '001'
    }
    if (curStatus.value == 'hstj') {
      params.newsLabel = '002'
    }
    if (curStatus.value == 'yexd') {
      params.newsLabel = '003'
    }
    getMessageList(params).then((res) => {
    if (res.code === 200) {
      if(res.data.list.length!=0){
          messageList.value = res.data.list
          messageList.value.map(s => {
            if(JSON.parse(s.newsImage).length){
              s.newsImage = process.env.VITE_API_API_IMAGE_URL + JSON.parse(s.newsImage)[0].url
            }
          return s
        })
      }else{
        messageList.value = []
      }
    loadingiconFlag.value = false
    } else {
      showToast(res.msg)
      loadingiconFlag.value = false
    }
  }).catch((err) => {
    console.log(err)
  })
}

const inputValue = ref('')
const handleSearch = ()=>{
  getList()
}

const toDetail = (id)=> {
  const params = {
    newsId: id,
    parentId: JSON.parse(localStorage.getItem('parentId')),
  }
  console.log(params)
  SpdbNewsClick(params).then((res) => {
    if (res.code === 200) {
      loadingiconFlag.value = false
    } else {
      showToast(res.msg)
      loadingiconFlag.value = false
    }
  }).catch((err) => {
    console.log(err)
  })
  router.push({ path: '/MessageDetail',query: { id: id, status: curStatus.value } })
}



onMounted(() => {
  initData();
  getList()
})


</script>


<style lang="scss" scoped>
.container-cc {
  // background: #f9f9f9;
  overflow: hidden;
  padding: 1rem 1.4rem;
  box-sizing: border-box;
}
.box{
  display: flex;
  justify-content: flex-start;
  margin-bottom: 1rem;
  margin-top: 2rem;
  border-radius: 1rem;
  box-sizing: border-box;
  background: #fff;
  padding: 1rem;
}

.mess-image{
  width: 12rem;
  height: 9rem;
  margin-right: 2rem;
  border-radius: .8rem;
}

.ellipsis-multiline {
  word-break: break-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}


.box-right{
  width: 20rem;
}
.title {
  font-size: 1.4rem;
  margin-bottom: 5rem;
}


.item-msg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .6rem;
  color: #aaa;
  font-size: 1.2rem;
}
.time{
  margin-top: 0.2rem;
}

.empty{
  color: #969799;
  font-size: 1.4rem;
  line-height: 5rem;
  text-align: center;
}
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 15rem;
  left: 40%;
}

.search-wrap {
  display: flex;
  align-items: center;
  position: relative;
  height: 3.6rem;
  padding: 0 1rem;
  background: #fff;
  box-sizing: border-box;
  border-radius: 1.8rem;
  font-size: 1.4rem;
  color: #777;
  overflow: hidden;

  .icon-wrap {
    position: absolute;
    left: 1rem;
    font-size: 1.8rem;
    font-weight: bold;
  }

  .input-wrap {
    width: 100%;
    height: 100%;
    text-indent: 2rem;
    box-sizing: border-box;
  }

  .search-btn {
    position: absolute;
    right: 1rem;
    padding: 0 1rem;
    border-left: .1rem solid #ccc;
    // border-radius: ;
    // background: #f1faf5;

  }
}
</style>
